<!-- 分销中心  -->
<template>
  <s-layout class="index-wrap" title="我的会员"  onShareAppMessage>
	  <view class="tip ss-flex align-start">
		  <uni-icons type="sound" size="20" color="#E6A406"></uni-icons>
		  <view class="ss-m-l-20">以下是推荐代理商平台给你赠送的会员，您可以选择赠送或转让给其他人</view>
	  </view>
    <view class="main">
		<view class="ss-flex justify-end">
			<button class="btn-txt ss-reset-button " @tap="sheep.$router.go('/pages/commission/giveaway/transfer-log')">
				转赠记录
			</button>
			<button class="btn-txt ss-reset-button " style="color:#003288">
				转赠收益
			</button>
		</view>
		
		<view class="block" v-for="(item,index) in state.list" :key="item.id">
			<view class="title">{{item.brief_text}}</view>
			<view class="content">
				{{`原价：${item.role.original_price}元${item.brief  == 'maker' ? '终身（前5万个名额仅需199元）':''}`}}
			</view>
			<view class="ss-flex justify-end">
				<button class="btn ss-reset-button " @tap="onClinck">
					转让
				</button>
				<button class="btn ss-reset-button " style="background:#003288" @tap="onClinck">
					赠送
				</button>
			</view>
		</view>
		<uni-load-more :status="state.more"></uni-load-more>

	</view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onShow ,onLoad} from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
 

  const state = reactive({
    list:[],
	page:'',
	more:'more'
  });
  
  const list=[
	  // {name:'商务BD',txt:'原价398元终身（前5万个名额仅需199元,还剩14003个名额）'},
	  // {name:'商务BDM',txt:'原价4980元'},
	  // {name:'服务中心(街道)',txt:'原价19800元'},
  ]
	onLoad(()=>{
		getInviteAward()
	})
  function onClinck(item){ 
	  uni.showToast({
		  title:'结算后开放',
		  icon:'none',
		  duration:2000,
		  mask:true
	  })
  }
  async function getInviteAward(){
	  state.more = 'loading'
	  let {error, data} = await sheep.$api.user.org.inviteAward()
	  if(error == 0){
		  state.list.push(...data.data)
		  state.page = data.current_page
		  state.more = data.page >= state.current_page ? 'more' :'no-more'
	  }
  }
  onShow(() => {
  });
</script>

<style lang="scss" scoped>
  :deep(.page-main) {
    background-size: 100% 100% !important;
  }
  .tip{
	  padding:18rpx 24rpx;
	  background:#FDEBD2;
	  color:#E6A406;
	  line-height: 1.5em;
  }
  .main{
	  padding:25rpx;
	  .btn-txt{
		  font-size: 26rpx;
		  color:#006B86;
		  margin-left:30rpx
	  }
	  .block{
		  margin-top:20rpx;
		  padding:35rpx 35rpx 45rpx;
		  width: 702rpx;
		  height: 263rpx;
		  border-radius: 20rpx;
		  background:url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/giveaway/20250314/fad67c650ab4f6afbb9d8a12576ff62c.png');
		  background-position: center;
		  background-repeat:  no-repeat;
		  background-size: cover;
		  box-sizing:border-box;
		  .content{
			  font-size: 26rpx;
			  color: #2D2D2D;
			  margin:20rpx 0 15rpx;
		  }
		  .title{
			  font-weight: bold;
			  position: relative;
			  font-size: 42rpx;
			  color: #ffffff;
			  text-shadow: 2rpx 2rpx 0 #2284B5,-2rpx -2rpx 0 #2284B5,-2rpx 2rpx 0 #2284B5,2rpx -2rpx 0 #2284B5;
			  -webkit-text-stroke: 2rpx #2284B5;
			  
			                          
		  }
		  .btn{
			  width: 126rpx;
			  height: 56rpx;
			  background: #006B86;
			  border-radius: 28rpx;
			  font-size: 26rpx;
			  color: #FFFFFF;
			  margin-left:16rpx;
		  }
		  
	  }
  }
</style>
